<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="telephone=no" name="format-detection">
    <title>付款</title>
    <link rel="stylesheet" href="style.css">
</head>
<body ontouchstart="">
<div class="pay-wrap">
    <div class="main">
        <div class="box">
            <img class="avatar" src="avatar.png" alt="">
            <div class="title">新天地世纪东方店</div>
            <div class="form-group">
                <div class="control-label">消费金额</div>
                <div class="control-box">
                    <div class="symbol">¥</div>
                    <div id="amount" class="form-control"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="keyboard">
        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
        <div id="del" class="key" data-action="del"></div>
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
        <div id="confirm" class="key" data-action="confirm" disabled>确定</div>
        <div class="key" data-action="hundred">00</div>
        <div class="key" data-action="zero">0</div>
        <div class="key" data-action="point">.</div>
    </div>
</div>
<script>
    var keyboard = document.querySelector('.keyboard'); //键盘
    var amount = document.getElementById('amount'); //金额
    var payBtn = document.getElementById('confirm'); //支付按钮
    var keyTimer;   //按键计时
    var keyFlag;    //是否使用按键
    var startX, startY; //开始触摸的坐标

    //输入
    function onInput(e) {
        var el = e.target;
        var curAmount = amount.innerHTML;  //当前金额
        var val = el.innerHTML;   //当前输入字符
        var action = el.getAttribute('data-action');  //按键类型

        if(curAmount === '') {
            if (action === 'confirm' || action === 'del' || action === 'hundred') {
                return;
            } else {
                //恢复光标位置
                amount.removeAttribute('reset');
            }
        }

        if (action === 'confirm') {
            //最后一位是小数点的话，移除
            if (/\.$/.test(curAmount)) {
                curAmount = curAmount.replace(/\.$/g, '');
            }

            //支付
            if (curAmount > 0) {
                console.warn('确认', curAmount, typeof curAmount, parseFloat(curAmount));
            }
        } else if (action === 'del') {
            //删除字符
            curAmount = curAmount.slice(0, curAmount.length - 1);

            //禁用支付按钮
            if (isNaN(curAmount) || curAmount <= 0) {
                payBtn.setAttribute('disabled', '');
            }

            //清空
            if (curAmount === '') {
                empty();
            }
        } else {
            var pointIndex = curAmount.indexOf('.');   //小数点位置

            //输入限制
            if (
                (curAmount.indexOf('0') === 0 && curAmount.length === 1 && (action === 'hundred' || action === 'zero')) || //排除无效0
                (action === 'point' && curAmount.split('.').length - 1 === 1) || //最多输入一个小数点
                (pointIndex !== -1 && curAmount.length - pointIndex - 1 >= 2) //最多输入两位小数
            ) {
                scrollRight();
                return;
            }

            //输入字符
            curAmount += val;

            //启用支付按钮
            if (curAmount > 0) {
                payBtn.removeAttribute('disabled');
            }

            //去掉整数前面的0
            if (curAmount >= 1 && /^0/.test(curAmount)) {
                curAmount = curAmount.replace(/^0/, '');
            }

            //保留两位小数
            if (pointIndex !== -1) {
                curAmount = curAmount.slice(0, pointIndex + 3);
            }
        }

        //赋值
        amount.innerHTML = curAmount;

        //滚动到最后
        scrollRight();
    }

    //清空
    function empty() {
        amount.innerHTML = '';
        payBtn.setAttribute('disabled', '');    //禁用支付按钮
        amount.setAttribute('reset', '');   //重置光标位置
    }

    //输入框滚动到最右边
    function scrollRight() {
        amount.scrollLeft = amount.scrollWidth - amount.clientWidth;
    }

    //给键盘绑定touch事件（解决click缓慢问题）
    keyboard.addEventListener('touchstart', function (e) {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //移动端判断是否是iOS平台浏览器
            e.preventDefault();
        }

        var action = e.target.getAttribute('data-action');  //按键类型

        startX = e.touches[0].clientX;
        startY = e.touches[0].clientY;

        keyFlag = true;

        keyTimer = setTimeout(function () { //阻止长按触发输入
            keyFlag = false;

            if (amount.innerHTML && action === 'del') { //长按删除
                empty();
            }
        }, 500);
    });
    keyboard.addEventListener('touchmove', function (e) {    //阻止滑动触发输入（增加滑动触发范围）
        var x = Math.abs(startX - e.touches[0].clientX) >= 30;
        var y = Math.abs(startY - e.touches[0].clientY) >= 30;
        if (x && y) {
            clearTimeout(keyTimer);
            keyFlag = false;
        }
    });
    keyboard.addEventListener('touchend', function (e) {    //触发输入
        clearTimeout(keyTimer);

        if (keyFlag) {
            onInput(e);
        }
    });

    //长按键盘禁止微信长按菜单
    keyboard.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    });
</script>
</body>
</html>